<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人简历模板</title>
		<style type="text/css">
			 
			p{
				margin: 0;
			}
			textarea{
				resize: none;
			}
			.main{
				margin: auto;
				width: 65%;
				height: 900px;
				display: flex;
				justify-content: space-between;
			}
			.left{
				
				background-color: #595959;
				margin-left: 0;
				width: 30%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between
				
			}
			
			.picture{
				margin: auto;
				border: 1px solid black;
				width: 110px;
				height: 120px;
				margin-top: 30px;
					
			}
			.file{				
				width: 100%;
				height: 100%;
				 
			}
			.name{
				width: 110px;
				height: 20px;
				margin: auto;
				background-color: #595959;
				margin-top: 5px;
				outline: none;
			}
			.name-input{
				width: 100%;
				height: 100%;
				outline: none;
				background-color: #595959;
			}
			.message{
				 
				width: 100%;
				height: 70%;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;
			}
			.basic{
				width: 100%;
				height: 30px;
				 background-color: #00B6B4;
				margin: 10px;
				text-align: center;
				
			}
			.basicdesc{
				margin-top: -10px;
				width: 100%;
				height: 100px;
				margin: 5px;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;
			}
			.basicdesc-input{
				width: 65%;
				outline: none;
				border: 0;
				background-color: #595959;
			}
			.skill{
			width: 100%;
			height: 30px;
			 background-color: #00B6B4;
			margin: 10px;
			text-align: center;
			}
			.skilldesc{
				width: 100%;
				height: 100px;
				 
				margin: 5px;
			}
			.skilldesc-input{
				width: 99%;
				height: 100%;
				outline: none;
				background-color: #595959;
			}
			.self{
				width: 100%;
				height: 30px;
				 background-color: #00B6B4;
				margin: 10px;
				text-align: center;
			}
			.selfdesc{
				width: 100%;
				height: 100px;
				 
				margin: 5px;
			}
			.right{
				 
				margin-right: 0;
				width: 70%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;
				justify-content: center;
			}
			.right .text{
				width:50%;
				height: 12%;
				 
			}
			.text .text1{
				font-size: 50px;
				position: relative;
				color: wheat;
				font-style: italic;
			}
			.text .text2{
				font-size: 50px;
				position: relative;
				color: dimgray;
				top: -75px;
				left: 40px;
				font-style: italic;
			}
			.right .content{
				width: 100%;
				height: 85%;
				 
				
			}
			.right .education{
				display: flex;
				flex-wrap: nowrap;
				margin: 10px;
			}
			.right .format{
				display: flex;
				flex-wrap: nowrap;
				margin: 10px;
				margin-top: 30px;
			}
			.right .blue{
				transform: skewX(-40deg);
				width: 5px;
				height: 25px;
				border: 1px solid skyblue;
				margin-left: 30px;
				background-color: aqua;
			}
			.right .edu{
				transform: skewX(-40deg);
				width: 200px;
				height: 25px;
				
				margin-left: 5px;
				background-color: dimgrey;
			}
			.right .dec{
				width: 180px;
				height: 10px;
				 
				background-color: dimgrey;
			}
			span{
				font-style: normal;
				color: white;
				font-size: 13px;
			}
			.right .desc{
				width: 100%;
				height: 10%;
				margin: 10px;
				 
			}
			.right .desc1{
				width: 100%;
				height: 120%;
				outline: none;
			}
			.top{
				margin: auto;
			}
			
		</style>
	</head>
	<body>
		<body class="main">
			<!-- 左面的个人信息 -->
			<div class="left">
				<div class="top">
					<!-- 左上方的照片 -->
				<div  class="picture">
					<input class="file" type="file" src=""  />
				</div>
				<!-- 姓名 -->
				<div class="name">
					<input class="name-input" type="text" name="" id="" value="" placeholder="在这里输入姓名" />
				</div>
				</div>
				
				<!-- 左面下面的信息 -->
				<div class="message">
					<div class="basic">
						<p>基础信息</p>
					</div>
					<div class="basicdesc">
						<div class="list">
							地址：<input class="basicdesc-input" type="text" placeholder="填写地址" name="" id="" value="" />
						</div>
						<div class="list">
							电话：<input class="basicdesc-input" type="number" placeholder="填写电话" name="" id="" value="" />
						</div>
						<div class="list">
							邮箱：<input class="basicdesc-input" type="email" placeholder="填写邮箱" name="" id="" value="" />
						</div>
						
						
					</div>
					<div class="skill">
						<p>技能证书</p>
					</div>
					<div class="skilldesc">
						<textarea placeholder="填写个人技能" class="skilldesc-input" rows="0" cols="0"></textarea>
					</div>
					<div class="self">
						<p>自我评价</p>
					</div>
					<div class="selfdesc">
						<textarea placeholder="填写自我评价" class="skilldesc-input" rows="0" cols="0"></textarea>
					</div>
				</div>
				
			</div>
			<!-- 右面的具体介绍 -->
			<div class="right">
				<!-- 右面的文字 -->
				<div class="text">
					<h1 class="text1">RESUME</h1>
					<h1 class="text2">RESUME</h1>
				</div>
				<!-- 下面的介绍 -->
				<div class="content">
					<!-- 教育背景 -->
					<div class="education ">
						<!-- 左面的小蓝条 -->
						<div class="blue"></div>
						<div class="edu">
							<span>教育背景 EDUCATIONS</span>
						</div>
						<div class="dec"></div>
					</div>
					<!-- 教育背景内容 -->
					<div class="edudesc desc">
						<textarea class="desc1" placeholder="填写教育背景内容" rows="" cols=""></textarea>
					</div>
					<!-- 职务 -->
					<div class="work format">
						<div class="blue blue-work"></div>
						<div class="edu edu-work">
							<span>职务 DUTIES</span>
						</div>
						<div class="dec dec-work"></div>
					</div>
					<!-- 职务内容 -->
					<div class="workdesc desc">
						<textarea class="desc1" placeholder="填写职务内容" rows="" cols=""></textarea>
					</div>
					<!-- 工作经历 -->
					<div class="work-life format">
						<div class="blue blue-life"></div>
						<div class="edu edu-life" >
							<span>工作经历 EXPERIENCE</span>
						</div>
						<div class="dec dec-life"></div>
					</div>
					<!-- 工作经历内容 -->
					<div class="lifedesc desc">
						<textarea class="desc1" placeholder="填写工作经历内容" rows="" cols=""></textarea>
					</div>
					<!-- 校内活动 -->
					<div class="activity format">
						<div class="blue bule-act"></div>
						<div class="edu edu-act">
							<span>校内活动 PRACTISE</span>
						</div>
						<div class="dec dec-act"></div>
					</div>
					<!-- 校园活动内容 -->
					<div class="actdesc desc">
						<textarea class="desc1" placeholder="填写校园活动内容" rows="" cols=""></textarea>
					</div>
					<!-- 所获奖励 -->
					<div class="reward format">
						<div class="blue blue-reward"></div>
						<div class="edu edu-reward">
							<span>所获奖励 AWARD</span>
						</div>
						<div class="dec dec-reward"></div>
					</div>
					<!-- 所获奖励内容 -->
					<div class="rewarddesc desc">
						<textarea class="desc1" placeholder="填写所获奖励内容" rows="" cols=""></textarea>
					</div>
				</div>
			</div>
		</body>
	</body>
</html>
